<template>
  <div class="priceCheck">
    <!-- 带输入建议 -->
    <el-row class="demo-autocomplete">
      <el-col :span="22">
        <el-autocomplete
          class="inline-input"
          v-model="form.city"
          :fetch-suggestions="querySearch"
          placeholder="切换城市"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
    </el-row>

    <!-- 入住离店选择器 -->
    <el-row class="block">
      <el-col :span="12">
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="入住日期"
          end-placeholder="离店日期"
        ></el-date-picker>
      </el-col>
    </el-row>

    <!-- 人数选择 -->
    <el-row class="peopleNumber">
      <el-col :span="30">
        <!-- 输入框 -->
        <el-input placeholder="人数未定" 
        v-model="peopleNumber"
        suffix-icon="el-icon-user">
          <i class="el-icon-user"></i>
        </el-input>

        <!-- 弹出框 -->
        <el-popover placement="bottom" title=" " width="300" trigger="click" content=" ">
          <el-button slot="reference" class="peopleNumberContent"></el-button>

          <!-- 弹出框下拉列表内容 -->
          <div class="eachRoom">
            <div class="eachRoomList">
              <div class="title">每间</div>

              <div class="select">
                <el-select v-model="value1" :placeholder="`${value1}`">
                  <el-option
                    v-for="item in ['1','2','3','4','5','6','7']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <span>成年</span>
              </div>

              <div class="select">
                <el-select v-model="value2" :placeholder="`${value2}`">
                  <el-option
                    v-for="item in ['0','1','2','3','4']"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <span>儿童</span>
              </div>
            </div>

            <div class="sure">
              <el-button type="primary" @click="handleClick">确定</el-button>
            </div>
          </div>
        </el-popover>
      </el-col>
    </el-row>

    <!-- 按钮：查看价格 -->
    <div class="priceCheckButton">
      <el-button type="primary">查看价格</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        city: "广州" //城市
      },
      value: "",
      peopleNumber: "",
      value1: "2",
      value2: "0"
    };
  },

  methods: {
    // 封装请求城市的方法
    getCities(value) {
      return this.$axios({
        url: "/cities",
        params: {
          name: value
        }
      }).then(res => {
        console.log(res);
        // data是城市的数组
        const { data } = res.data;
        // data的属性没有value值，需要转换下
        const newData = data.map(v => {
          v.value = v.name.replace("市", "");
          return v;
        });

        return newData;
      });
    },
    querySearch(value, cb) {
      if (!value) {
        cb([]);
        return;
      }
      // 根据value请求城市
      this.getCities(value).then(newData => {
        cb(newData);
      });
    },
    handleSelect(item) {
	  console.log(item);
    },
    // 点击确定按钮传值给人数
    handleClick() {
      if (this.value2 === "0") {
        this.peopleNumber = this.value1 + "成年";
        return;
      }
      this.peopleNumber = this.value1 + "成年" + this.value2 + "儿童";
    }
  }
};
</script>

<style scoped lang="less">
.priceCheck {
  display: flex;
  .peopleNumber {
    position: relative;
    margin-left: 6px;
    .peopleNumberContent {
      position: absolute;
      opacity: 0;
      width: 207px;
      height: 40px;
      top: 0;
      left: 0;
    }
  }

  .priceCheckButton {
    padding-left: 10px;
  }
}

.eachRoom {
  .eachRoomList {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    .title {
      width: 100px;
    }
    .select {
      position: relative;
      width: 90px;
      padding-right: 8px;
      span {
        position: absolute;
        top: 12px;
        right: 36px;
        font-size: 12px;
      }
    }
  }

  .sure {
    padding-top: 8px;
    float: right;
  }
}
</style>